import React, { Component } from 'react'
import './guide.less'
import TopNav from '../top_nav'
import BottomBar from '../bottom_bar'
import GuideBox from './guide_box'
import guideApi from '../../api/guide'
export default class Guide extends Component {
  state={
    recommendList:[],
    appList:[],
    docList:[],
    blogList:[]
  }
  componentDidMount() {
    window.scrollTo(0,0)
    this.getGuideRecommend();
    this.getGuideApp();
    this.getGuideDoc();
    this.getGuideBlog();
  }
  getGuideRecommend(){
    guideApi.queryList({recommend:1}).then(res=>{
      if(res.success){
        this.setState({
          recommendList:res.data.data
        })
      }
    }).catch(err=>{
      console.log(err);
    })
  }
  getGuideApp(){
    guideApi.queryList({type:'1'}).then(res=>{
      if(res.success){
        this.setState({
          appList:res.data.data
        })
      }
    }).catch(err=>{
      console.log(err);
    })
  }
  getGuideDoc(){
    guideApi.queryList({type:'2'}).then(res=>{
      if(res.success){
        this.setState({
          docList:res.data.data
        })
      }
    }).catch(err=>{
      console.log(err);
    })
  }
  getGuideBlog(){
    guideApi.queryList({type:'3'}).then(res=>{
      if(res.success){
        this.setState({
          blogList:res.data.data
        })
      }
    }).catch(err=>{
      console.log(err);
    })
  }
  render() {
    const {recommendList,appList,docList,blogList} = this.state
    return (
      <div className="guide-container">
         <TopNav style={{ background: '#fff', color: '#666' }} active="/guide"/>
         <div className="content">
           <GuideBox list = {recommendList}>推荐导航</GuideBox>
           <GuideBox list = {appList}>应用导航</GuideBox>
           <GuideBox list = {docList}>文档导航</GuideBox>
           <GuideBox list = {blogList}>文章导航</GuideBox>
         </div>
         <BottomBar style={{background:'#f9f9f9',borderTop:'1px solid #e5e5e5'}}/>
      </div>
    )
  }
}
